<template>
  <div>
    <el-form ref="form" :model="form" class="main" label-width="130px">
      <el-form-item label="场景类型：">
        <el-select v-model="form.renewtasktypes" multiple placeholder="请选择">
          <el-option
            v-for="item in sceneTypeList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务名称：">
        <el-input v-model="form.renewtaskname" placeholder="请录入"></el-input>
      </el-form-item>
      <el-form-item label="管理机构：">
        <el-select v-model="form.managecoms" multiple placeholder="请选择">
          <el-option
            v-for="item in organizationList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道：">
        <el-select v-model="form.salchnels" multiple placeholder="请选择渠道">
          <el-option
            v-for="item in channelList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务生成日期：">
        <el-col :span="6">
          <el-date-picker
            type="date"
            placeholder="请选择起始日期"
            v-model="form.taskCreateStartDate"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="text-align: center">-</el-col>
        <el-col :span="6">
          <el-time-picker
            placeholder="请选择终止日期"
            v-model="form.taskCreateEndDate"
            style="width: 100%"
          ></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="任务进度：">
        <div style="display: flex">
          <el-slider v-model="value9" @change="wan" range :max="100" style="width: 20%;margin-right: 10px">
          </el-slider>
          <el-col :span="4">
            <el-input v-model="form.taskRateStart" value="number" style="width: 100%">
              <template slot="append">%</template>
            </el-input>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center">-</el-col>
          <el-col :span="4">
            <el-input v-model="form.taskRateEnd" value="number" style="width: 100%">
              <template slot="append">%</template>
            </el-input>
          </el-col>
        </div>
      </el-form-item>
      <el-form-item label="大额单数量：">
        <el-input
          v-model="form.bigcontnum"
          value="number"
          placeholder="请填写数字"
          style="width: 30%"
        ></el-input
        >  及以上
      </el-form-item>
      <el-form-item label="计划偏差率：">
        <el-input v-model="form.planbaisrate" value="number" placeholder="请填写数字" style="width: 30%">
          <template slot="append">%</template> </el-input
        >  及以上
      </el-form-item>
      <el-form-item label="投诉客户：">
        <el-input
          v-model="form.complaintnum"
          value="number"
          placeholder="请填写数字"
          style="width: 30%"
        ></el-input
        >  及以上
      </el-form-item>
      <div class="foot">
        <div class="btnBox">
          <el-button plain @click="closeDialogRight()">取消</el-button>
          <el-button type="primary" @click="submitForm()">确定</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { validateNum, validatePhone } from "@/utils/validate";
import { getPlat, getSource } from "@/api/sourceManage/sourceManage";

export default {
  data() {
    return {
      form: {
        taskRateStart:40,
        taskRateEnd:80
      },
      value9: [0, 0],
      sceneTypeList: [
        {
          code: "new",
          name: "新人首单面谈",
        },
        {
          code: "ljspay",
          name: "应交期续收任务",
        },
        {
          code: "prospect",
          name: "前瞻续收提醒任务",
        },
        {
          code: "before",
          name: "应交前续收提醒任务",
        },
        {
          code: "lapse",
          name: "失效期复效提醒任务",
        },
        {
          code: "big",
          name: "期交大单品质回访",
        },
        {
          code: "low",
          name: "低继续率人员新契约回访",
        },
      ],
      // 管理机构：
      organizationList: [
        {
          code: 0,
          name: "全部",
        },
        {
          code: 1,
          name: "上海分公司",
        },
        {
          code: 2,
          name: "江苏分公司",
        },
        {
          code: 3,
          name: "安徽分公司",
        },
        {
          code: 4,
          name: "北京分公司",
        },
      ],
      // 渠道：
      channelList: [
        {
          code: 1,
          name: "全部",
        },
        {
          code: 2,
          name: "个险",
        },
        {
          code: 3,
          name: "团险",
        },
        {
          code: 4,
          name: "经代",
        },
        {
          code: 5,
          name: "银保",
        },
      ],
    };
  },
  mounted() {
  },
  methods: {
    wan(value){
    console.log(value,999)
    this.form.taskRateStart=value[0]
    this.form.taskRateEnd=value[1]
    },
    submitForm() {
      this.$emit("sendScreenMessage", this.form);
      this.form={}
    },
    closeDialogRight() {
      this.form={}
      this.$emit("closeDialogRight");
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  padding: 0 0 110px 0;
}
::v-deep .el-input-group__append{
  padding: 0 10px;
}
.el-input {
  width: 50%;
}
.el-select {
  width: 50%;
}
.foot {
  position: absolute;
  left: 80%;
  bottom: 35px;
  z-index: 2;
  background: #fff;
  display: flex;
  padding: 5px 10px;
  justify-content: space-between;
  width: 100%;
}
</style>
